<template>
  <view class="content">
    <view class="title">子组件B</view>
    <view class="b-box">
      CompA组件传进来的值:
      <text class="intent-text-box">{{compAData}}</text>
    </view>
    <view class="b-box" style="margin: 10rpx;">
      <text>回传值: </text>
      <input type="text" v-model="callBackValue"  />
      <button @click="sendOutside()" size="mini">回传</button>
    </view>
  </view>
</template>

<script>
export default {
  props: ['compAData'], // 接收父页面中转的compA数据
  data() {
    return {
      callBackValue: '' // 回传值的输入框
    }
  },
  methods: {
    sendOutside() {
      // 触发自定义事件，把回传值传给父页面
      this.$emit('callBackFun', this.callBackValue)
    }
  }
}
</script>
<style scoped>
.comp-b {
  padding: 20rpx 0;
}

/* 组件标题 */
.comp-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

/* 数据项样式 */
.data-item {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 25rpx;
}
.data-value {
  color: #2196f3; /* 清晰的蓝色 */
  font-weight: bold;
}

/* 回传区域样式 */
.callback-wrap {
  display: flex;
  align-items: center;
  gap: 15rpx;
}
.callback-input {
  flex: 1;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 15rpx;
  border: 1px solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
 
}
.callback-btn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  background-color: #4caf50;
  color: #fff;
  border-radius: 8rpx;
  font-size: 26rpx;
}
</style>